<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dom表格作业</title>
</head>

<body>
    <button class="add">添加一条新的访客信息</button>
    <button class="sort">从小到大</button>
    <button class="del">删除选中</button>
    <table border="1" cellspacing="0" cellpadding="10" style="margin-top: 10px;">
        <tbody>
            <tr>
                <th>序列号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
                <th>选择</th>
            </tr>
        </tbody>
    </table>
    <script>
        let info = [{
            name: "胡杭",
            age: 16
        }, {
            name: "胜明",
            age: 22
        }, {
            name: "军毅",
            age: 21
        }, {
            name: "晓华",
            age: 13
        }, {
            name: "盛聪",
            age: 23
        }, {
            name: "侦剑",
            age: 32
        }, {
            name: "红翔",
            age: 25
        }, {
            name: "超维",
            age: 18
        }, {
            name: "士琪",
            age: 22
        }, {
            name: "艳华",
            age: 20
        }, ];
        //1.能够添加数据
        //2.能够删除数据
        //3.能够按照年龄从小到大排序
        //4.添加完全部数据后，添加按钮失效
        //5.(选做)能够删除选中数据

        let addContent = document.querySelector('.add'); // 获取添加按钮
        let tbody = document.querySelector('tbody'); // 获取<tbody>~</tbody>
        let index = 0; // 自定义下标 
        var show = []; // 新渲染数组


        function add() {
            if (tbody.children.length <= info.length) {
                let newTr = document.createElement('tr'); // 创建节点 <tr></tr>
                newTr.innerHTML = `
                                <td>${index + 1}</td> 
                                <td>${info[index].name}</td>
                                <td>${info[index].age}</td>
                                <td><button>删除</button></td>
                                <td><input type='checkbox'></td> `; // ${index + 1}为了让序列号从 1 开始 通过下标进行渲染
                tbody.appendChild(newTr); // 创建节点 <tr>~</tr>显示出来
                index++; // 下标自增
                show.push(info[index - 1]); //  <td>${index + 1}</td> 所以减一 将旧渲染元素通过下标加到新渲染数组里
            } else if (tbody.children.length = info.length) { // 数组添加完了
                addContent.disabled = true; // 添加按钮禁用
            } else { //有空间时
                index = 0; //info数组要从第一个开始渲染
            }

        }
        addContent.addEventListener('click', add); // 添加（添加按钮）点击事件

        function dels(e) {
            if (e.target.tagName == 'BUTTON') { // 通过标签名
                e.target.parentNode.parentNode.remove(); // 删除<tr>~</tr>
                addContent.disabled = false; // 添加按钮启用
                index = 0; //info数组从第一个开始渲染
            }

        }
        tbody.addEventListener('click', dels); // 添加（删除按钮） 点击事件

        let sort = document.querySelector('.sort'); // 获取从小到大按钮
        sort.addEventListener('click', function() { // 添加从小到大按钮点击事件
            show.sort(function(a, b) {
                return a.age - b.age; // 排序 从小到大
            });

            show.forEach(function(ele, index) { //遍历新渲染数组
                let newTr = document.createElement('tr'); // 创建新节点 <tr></tr>
                newTr.innerHTML += `
                                <td>${index + 1}</td>
                                <td>${show[index].name}</td>
                                <td>${show[index].age}</td>
                                <td><button>删除</button></td>
                                <td><input type='checkbox'></td> `; // 通过下标进行渲染
                let oldTr = document.querySelectorAll("tr")[index + 1]; // 旧<tr>~</tr> [index + 1]跳过表头
                tbody.replaceChild(newTr, oldTr) // 新节点替换旧节点
            })

        });

        let check_box_dels = document.querySelector('.del'); // 获取删除选中按钮
        check_box_dels.addEventListener("click", function() { // 添加删除选中按钮点击事件
            let ipts = document.querySelectorAll("input"); // 获取所有<input>标签成伪数组
            ipts.forEach(function(ele) { // 遍历<input>伪数组
                if (ele.checked) { // 布尔值为true
                    ele.parentNode.parentNode.remove(); // 删除<tr>~</tr>
                    addContent.disabled = false; // 添加按钮启用
                    index = 0; //info数组从第一个开始渲染
                }
            })
        })

        // let cbx = document.querySelectorAll("input[type = checkbox]")

        // sort.addEventListener('click', function() {
        //     let trs = document.querySelectorAll('tr:not(:first-child)');
        //     // es6
        //     let newArr = [...trs];
        //     newArr.sort(function(a, b) {
        //         return a.children[2].innerHTML - b.children[2].innerHTML;
        //     });
        //     newArr.forEach(function(ele) {
        //         tbody.appendChild(ele);
        //     })
        // })
    </script>
</body>

</html>